
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>

    <style>

        span,input{
            display: inline-block;
        }
        h3{
            text-align: center;
        }
        .co1 {
            text-align: right;
            width: 150px;
            line-height: 40px;
        }
        input[type='text']{
            width: 250px;
            height: 30px;
            margin-left: 8px;
            outline: none;
            text-indent: 1em;
        }
        .box{
            width: 600px;
            background-color: antiquewhite;
            border: 1px solid black;
            margin: 30px auto;
            padding: 8px;
        }
        .btn{
            width: 85px;
            height: 35px;
            display: inline-block;
            margin: 0 10px;
        }

        .row{
            margin: 10px 0;
        }

        .opt_msg{
            font-size: 14px;
            color: red;
            font-weight: 600;
            display: none;
        }
    </style>

    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>

        $(function () {
            $('#input_name').click(function () {
                $('#name_msg').hide();
            }).blur(function () {
                $('#name_msg').show();

                if($('#input_name').val() == ''){
                     $('#name_msg').html("内容不能为空")
                }else{
                    $('#name_msg').css({color:'green'});
                     $('#name_msg').html("正确")
                    query_username()
                }


            });

            $('#input_pwd').click(function () {
                $('#pwd_msg').hide();
            }).blur(function () {
                var pwdstr = $('#input_pwd').val();

                if( pwdstr.length < 6 ){
                     $('#pwd_msg').show();
                     $('#pwd_msg').html("密码不能少于6位")
                }
            });

        })

        function query_username() {
            $.ajax({
                url:'/queryname',
                type:'get',
                dataType:'json',
                data:{name:$('#input_name').val()}
            })
                .success(function (data) {
                    console.log(data)
                    if(data.code == 1){
                        // 说明用户名已经存在
                         $('#name_msg').css({color:'red'});
                        $('#name_msg').html("用户名已存在")
                    }
                })

        }

    </script>
</head>
<body>

<h3>注册页面，请输入以下信息</h3>

<form action="/reg_user" method="get">

    <div class="box">
        <div class="row">
            <span class="co1">用户名</span>
            <span class="co2"><input id="input_name" type="text" name="username"></span>
            <span id="name_msg" class="opt_msg">提示信息</span>
        </div>
        <div class="row">
            <span class="co1">密码</span>
            <span class="co2"><input id="input_pwd" type="text" name="password"></span>
            <span id="pwd_msg" class="opt_msg">提示信息</span>
        </div>
        <div class="row" style="text-align: center">
            <input class="btn" type="submit" value="提交">
            <input class="btn" type="reset" value="重置">
        </div>
    </div>
</form>
</body>
</html>